<template>
  <div id="lesson">
    <div class="navbanner lunbo" >
			  <img src="../../static/images/it.png" class=""/>
        <div class="tour-nab">           
            <ul class="nav nav-pills recruit-ul">
                 <li  class="active-underline">
                    <router-link to="/lesson">
                        <a href="javascript:void(0);">文化课</a>
                    </router-link>
                 </li>
                <li>
                    <router-link to="/lesson/talent">
                        <a href="javascript:void(0);">才艺课</a>
                    </router-link>
                </li>
                <li>
                    <router-link to="/lesson/public">
                        <a href="javascript:void(0);">公开课</a>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
      <h1 class="t_nav">
        <p class="n1">课程体系</p>
         <div class="rt">当前位置：
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/lesson' }">课程体系</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/lesson' }">文化课</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
      </h1>
      <div class="navbanner clearfix" style="margin-top: 0;">
      <div class="content">
        <div class="lesson-list"  v-for="(temp,index) in storyList">
          <div class="" data-scroll-reveal="enter bottom over 1s">
             <img v-if="temp.imgSrc" :src="preUrl+temp.imgSrc" class="lesson-img" > 
          </div>
          <div class="lesson-body">
            <span class="lesson-head">{{temp.title}}</span><br>
            <div class="lesson-detail">
              <span class="item-head">培养目标：</span>
              <span class="jieshao" v-highlight  v-html="temp.content">提高英语读写听说能力</span>
            </div>
            <!-- <div class="lesson-detail"><span class="item-head">培养目标：</span><span class="details">提高英语读写听说能力</span></div>
            <div class="lesson-detail"><span class="item-head">适合人群：</span><span class="details">希望达到国际评测标准国内升学语言能力标准的孩子</span></div>
            <div class="lesson-detail"><span class="item-head">课程特色：</span><span class="details">培养国际交流小外交官</span></div> -->
          </div>
        </div>  
      </div>  
    </div>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  data () {
    return {
      pageSize: 10,
      storyList: [],
      url: {
        storyList: "/sunNews/list",
      },
      preUrl: "http://localhost:8080/jeecg-boot/sys/common/static/",
    }
  },
  components: {
    // 注册组件
  },
  mounted () { },
  created () {
     this.getStoryList();
  },
  methods: {
     //获取课程信息
    getStoryList() {
      request
        .get(this.url.storyList, {
          params: {
            pageSize:6,
            category:7,
          },
        })
        .then((res) => {
          if (res.data.success) {
            this.storyList = res.data.result.records;
            console.log(this.storyList);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  }
}
</script>

<style>
#lesson .navbanner .content{
  height: 800px;
  display: flex;
  justify-content: space-between;
}
.jieshao{
  width: 140px;
    text-align: left;
    float: right;
}
</style>
